<template>
  <div>
    <h3>Item组件</h3>
    <p v-if="paramsId === '001'">英雄联盟</p>
    <p v-if="paramsId === '002'">穿越火线</p>
    <p v-if="paramsId === '003'">逆战</p>
    <p>id:{{ id }}---title:{{ title }}---age:{{ age }}---a:{{ a }}</p>
  </div>
</template>
<script>
export default {
  name: 'Item',
  data() {
    return {
      paramsId: '',
    };
  },
  props: ['id', 'title', 'age', 'a'],
  mounted() {
    console.log(this);
  },

  // 组件内进入时守卫(在这里没有this，因为组件实例还没有创建)
  // 组件内进入时守卫的next方法可以接收一个回调函数作为参数，回调函数内部可以用过第一个参数拿到的组件实例
  beforeRouteEnter(to, from, next) {
    console.log('组件内进入时守卫', this);
    next((vm) => {
      console.log('next中的this', vm);
    });
  },

  // 组件内更新时守卫(只有当前路由的params动态参数发生改变的时候触发，并且不会再触发当前路由的独享守卫和组件进入时守卫)
  beforeRouteUpdate(to, from, next) {
    console.log('组件内更新时守卫');
    next();
  },

  //组件内离开时守卫(只有离开执行了，才能执行其他路由的前置守卫)
  beforeRouteLeave(to, from, next) {
    console.log('组件内离开时守卫');
    next();
  },
};
</script>
<style></style>
